<template>
  <div class="soundIntro" v-if="$attrs.info.sound">
      <div class="sound-info">
          <h3 class="title">{{$attrs.info.sound.soundstr}}</h3>
          <ul class="status">
              <li class="play-times">{{$attrs.info.sound.view_count_formatted}}</li>
              <li class="comments">{{$attrs.info.sound.comment_count}}</li>
              <li>音频 ID：{{$attrs.info.sound.id}}</li>
          </ul>
          <div class="intro-container" :class="{'expand':ifshowDetail}">
            <div class="intro">
                <p>简介</p>
                <div v-html="$attrs.info.sound.intro">
                </div>
            </div>
            <span class="btn-expand" @click="showDetail" :class="{'no-expand':$attrs.info.sound.intro.split('<p>').length<=2}"></span>
          </div>
      </div>
      <div class="sound-drama" v-if="$attrs.drama_info.drama">
          <a class="drama-cover">
              <img :src="$attrs.drama_info.drama.cover" alt="">
          </a>
          <a href="#" class="drama-detail">
              <div class="title">{{$attrs.drama_info.drama.name}}</div>
              <div class="type">{{$attrs.drama_info.drama.catalog_name}} 类型：{{$attrs.drama_info.drama.type_name}}</div>
              <div class="update">更新至 {{$attrs.drama_info.drama.newest}}</div>
          </a>
          <div class="space"></div>
          <div class="btn-love"></div>
      </div>
      <div class="sound-cv " v-if="$attrs.drama_info.drama&&$attrs.drama_info.cvs.length>0"  :class="{'no-expand':$attrs.drama_info.cvs.length<=4,'expand':ifshowCv}" >
          <div class="title">参演 CV （{{$attrs.drama_info.cvs.length}}）</div>
          <div class="cv-list">
              <div class="cv-item"
                v-for="cv in $attrs.drama_info.cvs"
                :key="cv.id"
              >
                  <img :src="cv.cvinfo.icon" alt="">
                  <div class="name">{{cv.cvinfo.name}}</div>
                  <div class="character">饰：{{cv.character}}</div>
                  <div class="group">{{cv.cvinfo.group}}</div>
              </div>
              
          </div>
          <span class="btn-expand"  @click="showCv"></span>
      </div>
      <div class="sound-user">
          <a class="cover" href="#">
              <img :src="$attrs.info.user.icon" alt="">
          </a>
          <div class="user-info">
              <a class="username" href="#">{{$attrs.info.user.username}}</a>
              <p class="publish-time">发布于：{{$attrs.info.sound.create_time | timeFilter}}</p>
          </div>
          <div class="space"></div>
          <div class="btn-follow">关注</div>
      </div>
      <div class="sound-related">
          <div class="sound-block sound-recommend" v-if="$attrs.like_info.dramas&&$attrs.like_info.dramas.length>0">
              <div class="title">剧集推荐</div>
              <div class="sound-container">
                  <a href="#" class="sound-item"
                  v-for="item in $attrs.like_info.dramas"
                  :key="item.id"
                  >
                      <div class="cover" :style="{backgroundImage: 'url('+item.front_cover+')'}"></div>
                      <div class="title">{{item.name}}</div>
                  </a>
                  
              </div>
          </div>
          <div class="sound-block sound-same" v-if="$attrs.like_info.sounds&&$attrs.like_info.sounds.length>0">
              <div class="title">相似音频</div>
              <div class="sound-container">
                  <PanleItem
                    v-for="item in $attrs.like_info.sounds"
                    :key="item.id"
                    :item="item"
                  ></PanleItem>
              </div>
          </div>
      </div>
  </div>
  <ThumbnailLoading v-else></ThumbnailLoading>
</template>

<script>
import ThumbnailLoading from "components/public/ThumbnailLoading"
import PanleItem from "components/home/recommend/PanleItem"
export default {
    data(){
        return {
            ifshowDetail:false,
            ifshowCv:false
        }
    },
    methods:{
        showDetail(){
            this.ifshowDetail=!this.ifshowDetail
        },
        showCv(){
            this.ifshowCv=!this.ifshowCv
        }
    },
    components:{
        PanleItem,
        ThumbnailLoading
    },
    filters:{
        timeFilter(value){
            var now = new Date(value * 1000); // 依情况进行更改 * 1
            let y = now.getFullYear();
            let m = now.getMonth() + 1;
            let d = now.getDate();
            return y + "/" + (m < 10 ? "0" + m : m) + "/" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 5);

        }
    }
}
</script>

<style lang="stylus">
.soundIntro
    width 100%
    position relative
    .sound-info
        padding 0 .1rem
        padding-bottom .18rem
        border-bottom 1px solid #e0e0e0
        .title
            font-size .14rem
            font-weight 400
            min-height .24rem
        .status
            list-style none
            height .14rem
            line-height .14rem
            font-size .1rem
            color #757575
            margin .1rem 0
            display flex
            li
                margin-right .2rem
                display flex
                align-items center
                &.play-times:before,&.comments:before
                    content ""
                    display block
                    background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons-thumbnails@2x.8e0a6b22.png')
                    background-size .56rem .55rem
                    background-repeat no-repeat
                    width .12rem
                    height .1rem
                    margin-right .04rem
                &.play-times:before
                    background-position -0.44rem -0.27rem
                &.comments:before
                    background-position -0.15rem -0.44rem
        .intro-container
            .intro
                margin .05rem 0
                font-size .12rem
                color #9e9e9e
                width 100%
                word-break break-all
                text-overflow ellipsis 
                overflow hidden
                max-height .4rem
                line-height .2rem
                height auto
                a
                    color #5aaef8
            .btn-expand
                background-size 2.62rem 2.34rem
                background-position -2.47rem -2.18rem
                display block
                width 0.14rem
                height 0.08rem
                background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons@2x.1592535d.png')
                margin-left calc(100% - 0.16rem)
                transition transfrom .3s
                &.no-expand
                    display none
        .expand
            .intro
                max-height  inherit
            .btn-expand
                transform rotate(180deg)
    .sound-drama
        display flex
        height 1.04rem
        margin 0 .1rem
        padding 0.18rem 0.02rem 0.18rem 0.02rem
        border-bottom 1px solid #e0e0e0
        .drama-cover
            display block
            width .6rem
            height .6rem
            border-radius 0.04rem
            
            overflow hidden
            img 
                width 100%
                height 100%
        .drama-detail
            display block
            margin-left .1rem
            width calc(100% - 0.72rem -0.7rem)
            >div
                height .2rem
                overflow hidden
                line-height .2rem
                text-overflow ellipsis 
                white-space nowrap 
            .title
                color #000
                font-size .14rem
                
            .type,.update
                color #9e9e9e
                font-size .12rem
        .space
            flex 1
        .btn-love
            width .65rem
            height .26rem
            margin .16rem 0
            padding .03rem
            border-color #ed7760
            background-color #ed7760
            color #fff
            font-size .12rem
            border 1px solid transparent
            cursor pointer
            border-radius 0.03rem
            display flex
            justify-content center
            align-items center
            &:before
                content ""
                display block
                background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons@2x.1592535d.png')
                width .13rem
                height .12rem
                background-size 2.62rem 2.34rem
                background-position -2.47rem -1.18rem
                margin-right 0.02rem
            &:after
                content "追剧"
                display block
    .sound-cv
        position relative
        padding .16rem 0
        border-bottom 1px solid #e0e0e0
        &.no-expand
            .btn-expand
                display none
        &.expand
            .cv-list
                max-height  inherit
            .btn-expand:before
                transform rotate(45deg)
        .title
            position absolute
            top -0.1rem
            right 0
            left 0
            width 1rem
            margin 0 auto 
            background-color #f5f5f5
            font-size .12rem
            text-align center
        .cv-list
            max-height 1.1rem
            overflow hidden
            display flex
            flex-wrap wrap
            justify-content flex-start
            align-items center
            .cv-item
                width calc(25% - 0.1rem)
                height 1.1rem
                >div
                    overflow hidden
                    text-overflow ellipsis 
                    white-space nowrap 
                    text-align center
                img 
                    display block
                    width .46rem
                    height .46rem
                    border-radius 50%
                    margin 0 auto
                .name
                    height .18rem
                    margin-top 0.05rem
                    font-size .12rem
                    line-height .18rem
                .character,.group
                    height .16rem
                    color #9e9e9e
                    font-size .1rem
                    line-height .16rem
        .btn-expand
            display block
            padding 0.05rem 0
            text-align center
            border-radius 0.03rem
            margin 0.03rem
            cursor pointer
            transition color .2s ease,background-color .2s ease,background .2s ease,border-color .2s ease
            &:before
                content ""
                display block
                width 0.08rem
                height 0.08rem
                margin 0 auto 
                transform rotate(-135deg)
                border-top 0.02rem solid #9e9e9e
                border-left 0.02rem solid #9e9e9e
    .sound-user
        height 0.78rem
        padding 0.18rem 0.12rem 0.18rem 0.12rem
        border-bottom 1px solid #e0e0e0
        display flex
        align-items center
        .cover
            display block
            width .4rem
            height .4rem
            overflow hidden
            border-radius 50%
            margin-right .1rem
            img 
                width 100%
                height 100%
        .user-info
            .username
                display block
                color #3d3d3d
                font-size .14rem
                height .2rem
                line-height .2rem
            .publish-time
                color #8c8c8c
                font-size .12rem
                height .2rem
                line-height .2rem
        .space
            flex 1
        .btn-follow
            height .26rem
            width .65rem
            line-height .18rem
            padding .03rem
            text-align center
            border-color #ed7760
            background-color #ed7760
            color #fff
            font-size .12rem
            border 1px solid transparent
            cursor pointer
            border-radius 0.03rem
    .sound-related
        margin .1rem 0
        .sound-block
            margin .2rem .08rem
        
            .title
                margin-bottom .1rem
                font-size .13rem
                color #979797
            .sound-container
                width 100%
                display flex
                flex-wrap wrap
                justify-content space-between
                .sound-item
                    display block
                    width calc((100% - 0.6rem) / 3)
                    .cover
                        width 100%
                        height 1.366rem
                        border-radius 0.04rem
                        background-repeat no-repeat
                        background-size cover
                        background-position 50%
                    .title
                        width 100%
                        white-space nowrap
                        text-overflow ellipsis
                        overflow hidden
                        color #424242
                        font-size .13rem
                        margin-top 0.02rem
</style>